<script setup lang="ts">
import { Switch } from '@headlessui/vue'

withDefaults(
  defineProps<{
    disabled?: boolean
    onIcon?: string
    offIcon?: string
  }>(),
  {
    disabled: false,
  },
)

const enabled = defineModel<boolean>()
</script>

<template>
  <Switch v-model="enabled" :disabled="disabled" class="relative h-5 w-10 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full p-0 vertical-middle disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900" :class="[enabled ? 'bg-ui-primary' : 'bg-stone-3 dark:bg-stone-7']">
    <span class="pointer-events-none relative inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out dark:bg-dark" :class="[enabled ? 'translate-x-5' : 'translate-x-0']">
      <span class="absolute inset-0 h-full w-full flex items-center justify-center">
        <SvgIcon v-if="(enabled && onIcon) || (!enabled && offIcon)" :name="(enabled ? onIcon : offIcon) as string" class="h-3 w-3 text-stone-7 dark:text-stone-3" />
      </span>
    </span>
  </Switch>
</template>
